<template>
    <div class="OrderTable">
        <div class="form">
            <input class="t-input" type="text" v-model="words" placeholder="用户名"/>
            <button class="t-btn" @click="next(1)" >查询</button>
        </div>
        <div class="left">
            <h1>订单</h1>
            <table class="t-table">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>创建时间</th>
                    <th v-if="btn1">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in rows" :key="index" @click="findDetail(item)">
                    <td v-text="item.username.substr(0,5)"  />
                    <td v-text="item.create.substr(0, 10)"/>
                    <td v-if="btn1">
                        <button class="t-btn info-btn " @click="btn1(item)" v-text="name1"/>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan=3>
                        <button @click="next(page - 1)" :disabled="page === 1">上一页</button>
                        <label>{{page}}/{{totalPage}}</label>
                        <button @click="next(page + 1)" :disabled="page === totalPage">下一页</button>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <div class="right">
            <h1>订单详情</h1>
            <table class="t-table">
                <thead>
                <tr>
                    <th v-for="(word,key) in cols" :key="key" v-text="word"/>
                    <th v-if="btn2">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in orderDetail" :key="item">
                    <td v-for="key in Object.keys(cols)" :key="key"
                        v-text="item[key].substr(0,6)" :title="item[key]" />
                    <td v-if="btn2">
                        <button class="t-btn info-btn " @click="btn2(item)" v-text="name2"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            // 订单的操作事件
            btn1: Function,
            name1: String,
            // 订单详情的操作事件
            btn2: Function,
            name2: String,
            // 订单状态 ('已完成'...)
            status: String
        },
        data() {
            return {
                words: '',
                rows: [],
                page: 1,
                totalPage: 1,
                cols: {book_index: '索取号', book_name: '图书名称', book_publish: '出版社', book_editor: '作者', status: '订单状态'},
                orderDetail: []
            }
        },
        created() {
            this.next(1);
        },
        methods: {
            next(val) {
                if (val <= 0 || val > this.totalPage)
                    return;
                this.page = val;
                this.$axios.get('/order', {params: {username: this.words, status: this.status, page: val}})
                    .then(res => {
                        if (res.data.code === 200) {
                            let content = res.data.content;
                            this.page = parseInt(content.page);
                            this.totalPage = parseInt(content.totalPage);
                            this.rows = content.rows;
                            this.orderDetail = [];
                        }
                    });
            },
            findDetail(item) {
                this.$axios.get('/order/detail', {params: {id:item.id}})
                    .then(res => {
                        if (res.data.code === 200) {
                            this.orderDetail = res.data.content;
                        } else {
                            window.alert('查询失败');
                        }
                    })
            }
        }
    };
</script>
<style scoped lang="scss">
    @import "OrderTable";
</style>
